<!-- begin page_header template -->
<div class="container padding16w margin14h">
  <div style="display: flex; flex-direction: row; align-items: center;">
    <!-- older tomato -->
    <div class="hide-xs" style="margin-right: 16px; height: 80px;">
      <img src="/img/older-tomato.svg" width="80" height="80" alt="older-tomato">
    </div>
    <!-- title -->
    <div style="display: flex; flex-direction: column; flex: 1;">
      <h1>{{ page.title }}</h1>
      <div style="display: flex; flex-direction: row;">
        <span>{{ page.sections | join: ' • ' }}</span>
        <span style="flex: 1;"></span>
        {%- if page.date %}
        <span style="align-self: flex-end;">{{ page.date | date: '%d.%m.%Y' }}</span>
        {%- endif %}
      </div>
    </div>
  </div>
  <hr>
</div>
<!-- end page_header template -->
